<template>
  <div>
    <el-card class="box-card">
      <!-- 头部区域 -->
      <template #header>
        <div class="header">
          <span>学生个人信息</span>
        </div>
      </template>
      <!-- 表单 提交-->
      <el-form ref="form" :model="stu" label-width="80px" v-if="!issubmit">
        <el-form-item label="个人姓名:">
          <el-input v-model="stu.name"></el-input>
        </el-form-item>
        <el-form-item label="学号:">
          <el-input v-model="stu.stuno"></el-input>
        </el-form-item>
        <el-form-item label="年级:">
          <el-input v-model="stu.grade"></el-input>
        </el-form-item>

        <el-form-item label="班级:">
          <el-select v-model="stu.classid" placeholder="请选择班级">
            <el-option v-for="c in cls" :key="c.classid" :label="c.classname" :value="c.classid" ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="联系电话:">
          <el-input v-model="stu.phone"></el-input>
        </el-form-item>
        <el-form-item label="图片上传:">
          <el-upload class="avatar-uploader" action="http://localhost:8080/avatar/upload"
                     :show-file-list="false" :on-success="addhandleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认</el-button>
        </el-form-item>
      </el-form>

      <!-- 表单 修改-->
      <el-form ref="form" :model="stumsg" label-width="80px" v-if="issubmit">
        <el-form-item label="个人姓名:">
          <el-input v-model="stumsg.name"></el-input>
        </el-form-item>
        <el-form-item label="学号:">
          <el-input v-model="stumsg.stuno"></el-input>
        </el-form-item>
        <el-form-item label="年级:">
          <el-input v-model="stumsg.grade"></el-input>
        </el-form-item>
        <el-form-item label="班级编号:"> 
          <el-select  v-model="stumsg.classid" placeholder="请选择班级" prop="classname">
            <el-option 
              v-for="c in cls" 
              :key="c.classid" 
              :label="c.classname"
              :value="c.classid" >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话:">
          <el-input v-model="stumsg.phone"></el-input>
        </el-form-item>
        <el-form-item label="图片上传:">
          <el-upload class="avatar-uploader" action="http://localhost:8080/avatar/upload"
                     :show-file-list="false" :on-success="updatehandleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onUpdate">修改</el-button>
        </el-form-item>
      </el-form>

    </el-card>
  </div>

</template>

<script>
import request from '@/utils/request';

export default {
  data() {
    return {
      // //从本地存储获取user数据
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      //学生信息
      stu: {
        userid: '',
        name: '',
        stuno: '',
        grade: '',
        classid: '',
        classname: '',
        phone: '',
        avatar: '',
      },

      stumsg: {
        stuid: '',
        userid: '',
        name: '',
        stuno: '',
        grade: '',
        classid: '',
        classname: '',
        phone: '',
        avatar: ''
      },
      //班级
      cls: {
        classid: '',
        classname: '',
      },
      imageUrl: '',
      issubmit: false,
    }
  },
  created() {
    this.stu.userid = this.user.data.userid
    this.getstuData()
    this.classSearch()
    localStorage.setItem("stuid")
  },
  methods: {
    //班级信息查询
    classSearch(){
      request.get("/class/find").then(res=>{
        if (res.data.code=='0'){
          this.cls=res.data.data
        }else {
          this.$message.error("获取班级信息错误")
        }
      })
    },
    
    //信息提交
    onSubmit() {
      request.post("/stu/addStu", this.stu).then(res => {
            if (res.data.code == '0') {
              this.$message.success('填写成功')
              this.issubmit = true
              this.getstuData()
            } else {
              this.$message.error('填写失败')
            }
          }
      ).catch(error => {
        console.error("填写时发生错误:", error);
        this.$message({
          message: '填写时发生错误，请重试',
          type: 'error'
        });
      });
    },

    //信息修改
    onUpdate() {
      console.log("stumsg:" + this.stumsg);
      request.put("/stu/updateStu", this.stumsg).then(res => {
        if (res.data.code == '0') {
          this.$message.success('修改成功')
          this.getstuData()
        } else {
          this.$message.error('修改失败')
        }
      }).catch(error => {
        console.error("修改时发生错误:", error);
        this.$message({
          message: '修改时发生错误，请重试',
          type: 'error'
        });
      });
    },

    //获取学生提交信息
    getstuData() {
      request.get("/stu/findstu", {
        params: {
          id: this.user.data.userid
        }
      }).then(res => {
        console.log(res.data)
        console.log(res.data.data)
        console.log(res.data.code)
        if (res.data.code == 0) {
          this.issubmit = true
          this.$message.success('成功获取个人信息');
          this.imageUrl = res.data.data.avatar
          this.stumsg = res.data.data
          console.log(this.stumsg)
        } else {
          this.$message.error('请填写个人信息');
        }
      }).catch(error => {
        console.error("获取信息时发生错误:", error);
        this.$message({
          message: '获取信息时发生错误，请重试',
          type: 'error'
        });
      });
    },


    addhandleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.stu.avatar = res.data
    },

    updatehandleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.stumsg.avatar = res.data
    },

    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }


  }
}

</script>

<style lang="less" scoped>
.box-card {
  width: 100%;
  color: #000;
}

.el-input {
  width: 60%;
}
.el-select{
  width: 60%;
}

/* 头像上传样式 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>